<template>
  <div>
  <div v-loading="loading" class="tableForm" :id='`table${tabsKey}`'>
    <div class="form1">
      <div>
        <span>窗口名称：</span>
        <a-input disabled style="width:140px" :maxLength="15" v-model="form.winName"></a-input>
      </div>
      <div class="margin-t-10">
        <span style="width:65px;text-align:right">行数：</span>
        <a-input-number 
          style="width:80px;text-align:right"
          :parser="(value) => (/^\d+$/.test(value) ? value : '')" 
          @change="setRowCount"
          v-model="form.rowCount" />
      </div>
      <div class="margin-t-10">
        <span style="width:65px;text-align:right">列数：</span>
        <a-input-number 
          style="width:80px"
          :parser="(value) => (/^\d+$/.test(value) ? value : '')" 
          @change="setColCount"
          v-model="form.colCount" />
      </div>
      <div v-show="false">
        <span>起点x：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.x"
        />
      </div>
      <div v-show="false">
        <span>起点y：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.y"
        />
      </div>
      <div v-show="false">
        <span>宽度：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.width"
        />
      </div>
      <div v-show="false">
        <span>高度：</span>
        <a-input-number
          disabled
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          v-model="form.height"
        />
      </div>
    </div>
    <div class="form2">
      <div class="rich_text">
        <div class="set">
          <a-space>
            <a-select 
              style="background-color:#fff;width:100px"
              v-model="form.fontName" 
              @change="setFont"
            >
              <a-select-option v-for="(item, index) in fontNameList" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
            <a-input 
              type="color"
              style="width:60px"
              disabled 
              v-model="form.fontColor"
              ></a-input>
            <a-select 
              style="background-color:#fff;width:60px"
              v-model="form.fontSize" 
              @change="setFontSize"
            >
              <a-select-option v-for="(item, index) in fontSizeList" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
            <a-select v-model="form.alignX" style="width: 60px;background-color:#fff" @change="setHAlign">
              <a-select-option value="0">
                <a-icon type="align-left" />
              </a-select-option>
              <a-select-option value="1">
                <a-icon type="align-center" />
              </a-select-option>
              <a-select-option value="2">
                <a-icon type="align-right" />
              </a-select-option>
            </a-select>
            <div v-show="false">
              <span>行距：</span>
              <a-input-number 
                style="width:40px"
                :parser="(value) => (/^\d+$/.test(value) ? value : '')" 
                v-model="form.lineSpace" />
            </div>
            <a-icon 
              @click="changeBold" 
              class="cursorPoint black"
              :style="{backgroundColor:form.isBold?'#fff':'transparent'}" 
              type="bold" />
            <a-icon 
              @click="changeItalic" 
              class="cursorPoint black" 
              :style="{backgroundColor:form.isItalic?'#fff':'transparent'}" 
              type="italic" />
            <!-- <a-icon 
              @click="changeDecoration" 
              class="cursorPoint black" 
              :style="{backgroundColor:form.isUnderline?'#fff':'transparent'}" 
              type="underline" /> -->
            <a-button 
              @click="createTable"
              class="margin-l-10" 
              style="padding:0 4px;font-size:13px;" 
              type="link">创建</a-button>
            <a-button 
              @click="saveTable"
              style="padding:0 4px;font-size:13px;" 
              type="link">保存</a-button>
          </a-space>
        </div>
        <div class="content">
          <div class="table-main">
            
          </div>
          <div class="tongxingzheng-size"></div>
            <!-- <div class="contextmenu-box">
              <div class="left-merge">向左合并</div>
              <div class="bottom-merge">向下合并</div>
            </div> -->
          </div>
      </div>
    </div>
    <div class="form3">
      <div>
        <span>进场特效：</span>
        <a-select v-model="form.actionType" @change="setForm">
          <a-select-option v-for="(item, index) in actionTypeList" :key="index" :value="item.value">{{ item.name }}</a-select-option>
        </a-select>
      </div>
      <div class="margin-t-20">
        <span>播放速度：</span>
        <a-select style="width: 76px" @change="setForm" v-model="form.actionSpeed">
          <a-select-option v-for="(item, index) in actionSpeedList" :value="item" :key="index">{{ item }}</a-select-option>
        </a-select>
        <span class="tip red">值小更快</span>
      </div>
      <div class="margin-t-20">
        <span>停留时间：</span>
        <a-input-number
          v-debounce="[setForm, 'input', 300]"
          :parser="(value) => (/^\d+$/.test(value) ? value : '')"
          :max="60"
          style="width: 76px"
          v-model="form.holdTime"
        />
        <span class="tip red">单位：秒</span>
      </div>
    </div>
  </div>
  <div class="tips">
    <p class="red">操作步骤：</p>
    <p class="red">· 请先录入表格“行数”与“列数”，点击“创建”创建表格；</p>
    <p class="red">· 如在编辑过程中需要修改表格“行数”与“列数”将会重置当前表格内容；</p>
    <p class="red">· 表格编辑完成后点击“保存”提交当前表格信息。</p>
  </div>
</div>
</template>

<script>
import $ from 'jquery';
import eqled from '@/const/eqLed.js';
export default {
  name: 'tableForm',
  data() {
    return {
      myScreen: {},
      form: {
        key: 0,
        type: '4',
        winName: '',
        fontName: '宋体',
        fontSize: '12',
        fontColor: '#ff0000',
        alignX: '0',
        alignY: '1',
        isBold: false,
        isItalic: false,
        isUnderline: false,
        lineSpace: '0',
        actionType: "1",
        actionSpeed: "3",
        holdTime: 5,
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        rowCount:2,
        colCount:2,
        fontCommon: {},
        actionCommon: {},
        areaCommon: {},
      },
      fontNameList: ['宋体', '微软雅黑', '楷体', '黑体'],
      fontSizeList: ['5', '6', '7', '8', '9', '10', '12', '14', '16', '18', '20', '24', '28', '32', '36', '44', '52', '60', '76'],
      actionTypeList: [
        { name: '无动画方式', value: '1' },
        { name: '左移', value: '2' },
        // { name: '连续左移', value: '3' },
        { name: '右移', value: '4' },
        { name: '上移', value: '5' },
        { name: '连续上移', value: '6' },
        { name: '下移', value: '7' },
      ],
      actionSpeedList: ["1","2","3"],
      visible:false,
      tableContent:'',
      selfId:'',
      loading:false
    };
  },
  props: {
    tabsKey: {
      type: Number,
      default: 0,
    },
    ledScreen: {
      type: Object,
      default: ()=>{},
    },
  },
  created() {
    this.myScreen = this.ledScreen;
    this.form.key = this.tabsKey;
    this.$bus.$on('closeLoading',() => {
      this.loading = false;
    })
  },
  computed: {},
  methods: {
    createObj(self, formData, key, pageType, isNewCreate) {
      this.form = Object.assign(this.form, formData);
      this.form.winName = `表格_${key}`;
      this.selfId = self;
      if(pageType != 2 && isNewCreate){
        this.myScreen.createWindow(this.form, pageType, key, self);
      }
    },
    setForm(){
      this.form.showFontSize = this.getShowFontSize(this.form.fontName, this.form.fontSize);
      this.myScreen.setForm(this.form);
    },
    //获取预览显示字号
    getShowFontSize(fontName, fontSize){
      let showFontSize = '';
      if(fontName == '宋体'){
        showFontSize = eqled.songfontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '楷体'){
        showFontSize = eqled.kaifontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '黑体'){
        showFontSize = eqled.heifontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '微软雅黑'){
        showFontSize = eqled.yaheifontSizeMap[fontSize]['fontSize'];
      }
      return showFontSize;
    },
    changeBold(){
      this.form.isBold = !this.form.isBold;
      if(this.form.isBold){
        $('.table-box input').css({
          'font-weight': 'bold'
        })
      } else {
        $('.table-box input').css({
          'font-weight': 'normal'
        })
      }
    },
    changeItalic(){
      this.form.isItalic = !this.form.isItalic;
      if(this.form.isItalic){
        $('.table-box input').css({
          'font-style': 'italic'
        })
      } else {
        $('.table-box input').css({
          'font-style': 'normal'
        })
      }
    },
    changeDecoration(){
      this.form.isUnderline = !this.form.isUnderline;
      if(this.form.isUnderline){
        $('.table-box input').css({
          'text-decoration': 'underline'
        })
      } else {
        $('.table-box input').css({
          'text-decoration': 'none'
        })
      }
    },
    createTable(){
      this.form.showFontSize = this.getShowFontSize(this.form.fontName, this.form.fontSize);
      this.myScreen.createTable(this.form, true);
    },
    saveTable(){
      this.loading = true;
      this.myScreen.saveTable(this.form);
    },
    setFont() {
      $('.table-box input').css({
        'font-family': this.form.fontName
      })
    },
    setFontSize() {
      this.form.showFontSize = this.getShowFontSize(this.form.fontName, this.form.fontSize);
      this.myScreen.setTableFontSize(this.form.showFontSize);
      
    },
    setRowCount(){
      this.myScreen.setRowCount(this.form.rowCount);
    },
    setColCount(){
      this.myScreen.setColCount(this.form.colCount);
    },
    setHAlign() {
      $('.table-box input').css({
        'text-align': this.form.alignX == 0?'left':this.form.alignX == 1?'center':'right'
      })
    },
    //整理为要发送的格式
    sort(_item) {
      let obj = {
        content: [],
      };
      obj.winName = _item.winName;
      obj.type = _item.type;
      obj.key = _item.key;
      obj.row = _item.rowCount;
      obj.column = _item.colCount;
      obj.content = _item.contentArr;
      obj.tableUrl = _item.tableUrl;
      obj.content = JSON.stringify(obj.content);
      console.log(obj);
      return obj;
    },
    //设置
    save(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (!valid) {
          return false;
        }
        //添加到素材列表数据
        let obj = this.sort();
        console.log(obj);
        this.addProgramData(obj);
        this.$message.success('保存成功');
        this.$emit('updateTabs', { key: obj.key, title: obj.winName });
      });
    },
    
  },
  destroyed() {
    this.$bus.$off('closeLoading');
  },
};
</script>

<style lang="less" scoped>
.tableForm{
  display: flex;
  color: #999;
  font-size: 13px;
  .form1{
    width: 240px;
    height: 225px;
    border: 1px solid #eee;
    border-top: none;
    padding: 16px;
    /deep/ .ant-select-selection{padding-left: 0;}
    &>div{
      display: flex;
      align-items: center;
    }
  }
  .form2{
    width: 520px;
    height: 225px;
    border-bottom: 1px solid #eee;
    padding: 10px;
    .rich_text{
      border: 1px solid #ddd;
      width: 100%;
      height: 100%;
      .set{
        width: 100%;
        height: 44px;
        padding: 6px 12px;
        margin: 0 auto;
        background-color: #f9f9f9;
        background: linear-gradient(to bottom,  #d9d9d9 0%,#f7f7f7 100%);
        /deep/ .ant-select-selection{padding-left: 0;}
        /deep/ .ant-select-selection--single .ant-select-selection__rendered{margin-right: 8px;}
      }
      .content{
        width: 100%;
        height: 160px;
        background-color: #333;
        overflow: auto;
      }
    }
  }
  .form3{
    width: 240px;
    height: 225px;
    border: 1px solid #eee;
    border-top: none;
    padding: 16px;
    /deep/ .ant-select-selection{padding-left: 0;}
  }
}
.form_title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.tip {
  font-size: 12px;
  margin-left: 6px;
}
.tip::before {
  content: '* ';
  color: #ff0000;
}
.tips{
  margin-top:12px;
  margin-bottom:12px;
  font-size: 13px;
  p{
    margin-bottom: 4px;
  }
}
/deep/ .ant-input-number-handler-wrap{
    display:none;
}
</style>
